<template>
    <div class="container flex-container">
        <n-spin :show="questionStore.loading" class="left">
            <n-card size="large">
                <div style="position: relative; min-height: 50vh">
                    <n-tabs size="large" type="card" @update:value="handleUpdateTab">
                        <n-tab-pane name="latest" tab="最新">
                            <ListItem v-for="item in questionStore.questionList" :key="item.id" :question="item"/>
                            <template #description>
                                你不知道你有多幸运
                            </template>
                            <n-empty v-if="!questionStore.questionList.length" description="你什么也找不到" size="huge">
                                <template #extra>
                                    <router-link to="/">
                                        <n-button>
                                            看看别的
                                        </n-button>
                                    </router-link>
                                </template>
                            </n-empty>
                        </n-tab-pane>
                        <n-tab-pane name="hot" tab="最热">
                            <ListItem v-for="item in questionStore.questionList" :key="item.id" :question="item"/>
                            <template #description>
                                你不知道你有多幸运
                            </template>
                            <n-empty v-if="!questionStore.questionList.length" description="你什么也找不到" size="huge">
                                <template #extra>
                                    <router-link to="/">
                                        <n-button>
                                            看看别的
                                        </n-button>
                                    </router-link>
                                </template>
                            </n-empty>
                        </n-tab-pane>
                        <n-tab-pane name="noAnswer" tab="待回答">
                            <ListItem v-for="item in questionStore.questionList" :key="item.id" :question="item"/>
                            <template #description>
                                你不知道你有多幸运
                            </template>
                            <n-empty v-if="!questionStore.questionList.length" description="暂时还没有同学需要帮助~" size="huge">
                                <template #extra>
                                    <router-link to="/questions/ask">
                                        <n-button>
                                            提问
                                        </n-button>
                                    </router-link>
                                </template>
                            </n-empty>
                        </n-tab-pane>
                    </n-tabs>
                    <router-link to="/questions/ask">
                        <n-button style="position: absolute; right: 0; top: 0;" type="primary">我要提问</n-button>
                    </router-link>
                </div>
                <template #footer>
                    <div class="pagination">
                        <n-pagination
                            v-model:page="questionStore.currentPage"
                            v-model:page-size="questionStore.pageSize"
                            :item-count="total"
                            :page-sizes="[5, 10, 20, 30, 40]"
                            :show-size-picker="true"
                            @update:page="handleCurrentPageChange"
                            @update:page-size="handlePageSizeChange"
                        >
                            <template #prefix="{ itemCount }">
                                共 {{ itemCount }} 项
                            </template>
                        </n-pagination>
                    </div>
                </template>
            </n-card>
        </n-spin>
        <div class="right">
            <n-card :segmented="{content: true, footer: 'soft'}" title="关于标签">
                标签由平台用户发布，
                <br>
                管理员会定时清理无用的标签
            </n-card>
            <n-card :segmented="{content: true, footer: 'soft'}" title="热门标签">
                <n-space v-for="(tag, index) in hotTags" :key="tag.id" class="tag">
                    <n-tag :bordered="false" :color="{ color: '#F7F7FA' }" class="number">{{ ++index }}</n-tag>
                    <n-text class="name" @click="handleClickTag(tag.id)">{{ tag.name }}</n-text>
                </n-space>
            </n-card>
        </div>
    </div>
</template>

<script setup>
import ListItem from '../components/Question.vue'
import { onMounted, ref } from 'vue'
import { listQuestions, listQuestionsByTagId } from '../api/question'
import { useLoadingBar, useMessage } from 'naive-ui'
import { listHotTags } from '../api/tag'
import { useQuestionStore } from '../store/question'

window.$message = useMessage()
let total = ref(0)
const hotTags = ref(null)
const questionStore = useQuestionStore()

const handleCurrentPageChange = (current) => {
    questionStore.currentPage = current
    getAll()
}
const handlePageSizeChange = (size) => {
    questionStore.pageSize = size
    getAll()
}
const loadingBar = useLoadingBar()
const getAll = () => {
    loadingBar.start()
    listQuestions(questionStore.currentPage, questionStore.pageSize, 'latest').then(res => {
        questionStore.questionList = res.data.records
        total.value = res.data.total
        questionStore.currentPage = res.data.current
        questionStore.pageSize = res.data.size
        questionStore.loading = false
        loadingBar.finish()
    })

    listHotTags().then(res => {
        hotTags.value = res.data
    })
}

onMounted(() => {getAll()})
const tabName = ref('latest')
const handleClickTag = (tagId) => {
    loadingBar.start()
    listQuestionsByTagId(questionStore.currentPage, questionStore.pageSize, tagId, tabName.value).then(res => {
        questionStore.questionList = res.data.records
        total.value = res.data.total
        questionStore.currentPage = res.data.current
        questionStore.pageSize = res.data.size
        loadingBar.finish()
    })
}

const handleUpdateTab = (value) => {
    loadingBar.start()
    tabName.value = value
    listQuestions(questionStore.currentPage, questionStore.pageSize, value).then(res => {
        questionStore.questionList = res.data.records
        total.value = res.data.total
        questionStore.currentPage = res.data.current
        questionStore.pageSize = res.data.size
        loadingBar.finish()
    })
}

</script>

<style scoped>
.flex-container {
    display: flex;
    gap: 1vw;
}

.left {
    flex: 1;
}

.right {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.n-spin-container:deep(.n-spin-body) {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
}

.tag {
    align-items: center;
}

.tag .name {
    cursor: pointer;
}

.name:hover {
    color: #18a058;
}
</style>
